<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib uri="http://example.com/mytags" prefix="mytags"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet"
	href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<title>筛选</title>
<link rel="stylesheet" href="resources/css/user.css">
<style>
    .radio-group {
        display: flex;
    }

    input[type="radio"] {
        display: none; /* 隐藏原始单选按钮 */
    }

    label.radio-label {
        display: block;
        flex: 1;
        text-align: center;
        padding: 10px 20px;
        margin: 5px;
        border: 1px solid #ccc;
        border-radius: 4px;
        cursor: pointer;
        color: #333;
        background-color: #fff;
    }

    input[type="radio"]:checked + label {
        background-color: rgb(77, 88, 99);
        color: #fff;
    }
    
    label.btn {
    	margin:5px;
    }
</style>
</head>
<body>
	<!-- 导航栏 -->
	<nav class="navbar navbar-expand-lg">
		<a class="navbar-brand" href="#">书影音</a>
		<button class="navbar-toggler" type="button" data-toggle="collapse"
			data-target="#navbarNav" aria-controls="navbarNav"
			aria-expanded="false" aria-label="Toggle navigation">
			<span class="navbar-toggler-icon"></span>
		</button>
		<div class="collapse navbar-collapse" id="navbarNav">
			<ul class="navbar-nav mr-auto">
				<li class="nav-item"><a class="nav-link"
					href="<c:url value = "/home"/>">首页 <span class="sr-only">(current)</span></a>
				</li>
				<li class="nav-item"><a class="nav-link"
					href="<c:url value = "/book"/>">读书</a></li>
				<li class="nav-item"><a class="nav-link"
					href="<c:url value = "/movie"/>">影视</a></li>
				<li class="nav-item"><a class="nav-link"
					href="<c:url value = "/music"/>">音乐</a></li>
				<li class="nav-item active"><a class="nav-link"
					href="<c:url value = "/filter"/>">筛选</a></li>
				<li class="nav-item"><a class="nav-link" href="<c:url value = "/user"/>">我的</a></li>
			</ul>
			<c:if test="${not empty sessionScope.user}">
            	<a class="nav-link" style="color:white"
					href="<c:url value = "/user"/>">欢迎您，${user.username }</a>
       	 	</c:if>
			<form class="form-inline my-2 my-lg-0 " method="POST"
				action="<c:url value = "/search"/>">
				<input class="form-control mr-sm-2 bg-transparent " type="search"
					name="title" placeholder="搜索" aria-label="搜索">
				<button class="btn btn-outline-light my-2 my-sm-0 " type="submit">搜索</button>
			</form>
		</div>
	</nav>
	<div class="jumbotron" style="height: 200px; background: #fdfcfb">
		<h1 class="display-4">欢迎来到搜索页面</h1>
		<hr class="my-4">
	</div>
	<br>
	<div class="container">
    <form action="<c:url value = "/filter_post"/>" method="get">
        <div class="container">
            <div class="form-group">
                <p class="mb-2">年份:</p>
                <div class="btn-group" role="group" aria-label="年份" id="year-group">
                    <input type="radio" id="year0" name="year" value="全部">
                    <label for="year0" class="btn btn-outline-secondary">全部</label>
                    <input type="radio" id="year1" name="year" value="2011">
                    <label for="year1" class="btn btn-outline-secondary">2011</label>
                    <input type="radio" id="year2" name="year" value="2012">
                    <label for="year2" class="btn btn-outline-secondary">2012</label>
                    <input type="radio" id="year3" name="year" value="2013">
                    <label for="year3" class="btn btn-outline-secondary">2013</label>
                    <input type="radio" id="year4" name="year" value="2014">
                    <label for="year4" class="btn btn-outline-secondary">2014</label>
                    <input type="radio" id="year5" name="year" value="2015">
                    <label for="year5" class="btn btn-outline-secondary">2015</label>
                    <input type="radio" id="year6" name="year" value="2016">
                    <label for="year6" class="btn btn-outline-secondary">2016</label>
                    <input type="radio" id="year7" name="year" value="2017">
                    <label for="year7" class="btn btn-outline-secondary">2017</label>
                    <input type="radio" id="year8" name="year" value="2018">
                    <label for="year8" class="btn btn-outline-secondary">2018</label>
                    <input type="radio" id="year9" name="year" value="2019">
                    <label for="year9" class="btn btn-outline-secondary">2019</label>
                    <input type="radio" id="year10" name="year" value="2020">
                    <label for="year10" class="btn btn-outline-secondary">2020</label>
                    <input type="radio" id="year11" name="year" value="2021">
                    <label for="year11" class="btn btn-outline-secondary">2021</label>
                    <input type="radio" id="year12" name="year" value="2022">
                    <label for="year12" class="btn btn-outline-secondary">2022</label>
                    <input type="radio" id="year13" name="year" value="2023">
                    <label for="year13" class="btn btn-outline-secondary">2023</label>
                    <input type="radio" id="year14" name="year" value="2024">
                    <label for="year14" class="btn btn-outline-secondary">2024</label>
                </div>
            </div>

            <div class="form-group">
                <p class="mb-2">类型:</p>
                <div class="btn-group" role="group" aria-label="类型" id="tag-group">
                    <input type="radio" id="tag0" name="tag" value="全部">
                    <label for="tag0" class="btn btn-outline-secondary">全部</label>
                    <input type="radio" id="tag1" name="tag" value="Action">
                    <label for="tag1" class="btn btn-outline-secondary">Action</label>
                    <input type="radio" id="tag2" name="tag" value="Pop">
                    <label for="tag2" class="btn btn-outline-secondary">Pop</label>
                    <input type="radio" id="tag3" name="tag" value="Fantasy">
                    <label for="tag3" class="btn btn-outline-secondary">Fantasy</label>
                    <input type="radio" id="tag4" name="tag" value="Comedy">
                    <label for="tag4" class="btn btn-outline-secondary">Comedy</label>
                    <input type="radio" id="tag5" name="tag" value="Mystery">
                    <label for="tag5" class="btn btn-outline-secondary">Mystery</label>
                    <input type="radio" id="tag6" name="tag" value="Rock">
                    <label for="tag6" class="btn btn-outline-secondary">Rock</label>
                    <input type="radio" id="tag7" name="tag" value="Thriller">
                    <label for="tag7" class="btn btn-outline-secondary">Thriller</label>
                </div>
            </div>

            <div class="form-group">
                <p>类别:</p>
                <div class="btn-group" role="group" aria-label="类别" id="category-group">
                    <input type="radio" id="category0" name="type" value="全部">
                    <label for="category0" class="btn btn-outline-secondary">全部</label>
                    <input type="radio" id="category1" name="type" value="Book">
                    <label for="category1" class="btn btn-outline-secondary">Book</label>
                    <input type="radio" id="category2" name="type" value="Movie">
                    <label for="category2" class="btn btn-outline-secondary">Movie</label>
                    <input type="radio" id="category3" name="type" value="Music">
                    <label for="category3" class="btn btn-outline-secondary">Music</label>
                </div>
            </div>

            <button type="submit" class="btn btn-primary">搜索</button>
        </div>
    </form>
</div>



	<br>
	<hr>
	<br>
	<c:forEach items="${mediaList}" var="media">
		<div class="container mt-3">
			<div class="media border p-3" style="position: relative;">
				<img src="<c:url value = "${media.imageUrl}"/>" alt="加载中"
					class="mr-3 mt-3" style="width: 90px;">
				<div class="media-body">
					<h4>
						<c:out value="${media.title}" />
						<small><i> </i></small>
						<c:out value="${media.releaseDate}" />
						评分：
						<c:out value="${media.averageRating}" />
					</h4>
					<p>
						<c:out value="${media.description}" />
					</p>
				</div>
				<div style="position: absolute; bottom: 0; right: 0;">
					<a href="<c:url value = "/${media.id}"/>" class="card-link">查看评价详情</a>
				</div>
			</div>
		</div>
	</c:forEach>


<c:if test="${not empty mediaList }">
<nav>
    <mytags:pagination page="${page}" pageCount="${pageCount}" />
</nav>
</c:if>
	<br>
	<br>
	<div class="fixed-bottom">
	
		<!-- 页脚 -->
	<footer class=" text-center py-3"> &copy;
		2023 书影音 </footer>
	</div>
	<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
	<script
		src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
	<script
		src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>



</body>
</html>
